<template>
	<div class="vditor-preview-com w-full h-full" ref="vditor"></div>
</template>

<script lang="ts">
import Vditor from 'vditor';
import 'vditor/dist/index.css';

export default defineComponent({
	name: 'VditorPreview',
	props: {
		content: {
			type: String,
			default: '',
		},
	},
	setup(props) {
		const vditorRef = useTemplateRef<HTMLDivElement>('vditor');

		onMounted((): void => {
			Vditor.preview(vditorRef.value as HTMLDivElement, props.content, {
				mode: 'light',
			});
		});
	},
});
</script>
